<template>
	<view class="attention-box">
		<view class="imghead" @click="onAuthor">
			<u-image width="100%" height="100%" :src="author.avatar"></u-image>
		</view>
		<view class="nick-fans">
			<text class="f-w nick">{{author.nickname}}</text>
			<text class="f-w fans-sum">{{fansCount}}人关注</text>
		</view>
		<button class="concern" :class="[isFollow?'noIcon':'yesIcon']" :disabled="disabledButton" @click="onFollow" v-if="!isSelf && isLogin">{{buttonText}}</button>
		<button class="concern" :class="[isFollow?'noIcon':'yesIcon']" :disabled="disabledButton" @click="onLogin" v-if="!isLogin">登录后关注</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				buttonText: "关注",
				disabledButton: false,
				isFollow: true
			}
		},
		methods: {
			/* 点击用户事件 */
			onAuthor() {
				this.$emit("onAuthor")
			},
			/* 点击登录 */
			onLogin() {
				this.$emit("onLogin")
			},
			// 点击关注
			onFollow(state) {
				console.log(this.isFollow)
				this.disabledButton = true;
				if(this.isFollow){
					this.$emit("onCancel")
				}else{
					this.$emit("onFollow")
				}
			},
			resetFollowStatus() {
				this.disabledButton = false;
				switch(this.followStatus) {
					case(0):
						this.buttonText = "关注"
						this.isFollow = false
						break;
					case(1):
						this.buttonText = "关注"
						this.isFollow = false
						break;
					case(2):
						this.buttonText = "已关注"
						this.isFollow = true
						break;
					case(3):
						this.buttonText = "互相关注"
						this.isFollow = true
						break;
				}
			}
		},
		created() {
			this.resetFollowStatus();
		},
		watch: {
			followStatus() {
				this.resetFollowStatus();
			}
		},
		props: {
			//用户信息
			author: {
				type: Object,
			},
			//粉丝数量
			fansCount: {
				type: Number,
				default: 0
			},
			//是否是自己
			isSelf: {
				type: Boolean,
				default: false
			},
			/* 关注状态
			 *		0:彼此都没有关注对方
			 * 		1:对方关注了自己，但自己没有关注对方
			 * 		2:自己已经关注了对方，但对方没有关注自己
			 * 		3:彼此已经互相关注 */
			followStatus: {
				type: Number,
				default: 0
			},
			//登录状态
			isLogin: {
				type: Boolean,
				default: true
			}
		}
	}
</script>

<style lang="less" scoped>
	@width:750rpx;
	.attention-box {
		width: 750rpx;
		height: @width*0.2;
		padding: 3% 2%;
		margin: 2% 0;
		align-items: center;
		.imghead {
			border-radius: 40rpx;
			width: 80rpx;
			height: 80rpx;
			margin-left: 2%;
		}
		.nick-fans {
			padding: 0 20rpx;
			align-content: space-between;
			flex: 1;
			.f-w {
				width: 100%;
				align-items: center;
			}
			.nick {
				font-weight: 600;
				font-size: 32rpx;
			}
			.fans-sum {
				align-items: center;
				font-size: 28rpx;
				color: #bbbbbb;
			}
		}
		.concern {
			padding: 0 3%;
			font-size: 28rpx;
			height: 64rpx;
			min-width: 150rpx;
			justify-content: center;
			align-items: center;
			align-content: center;
			border-radius: 32rpx;
		}
		.yesIcon {
			background-color: rgb(255,98,0);
			color: #ffffff;
		}
		.noIcon {
			background-color: rgb(233,233,233);
			color: rgb(191,191,191);
		}
	}
</style>
